<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>List of select, radio, checkbox</title>

	<script type="text/javascript">
		function checkAll() {
			var options = document.getElementsByName("options");
			for (var i = 0; i < options.length; i++) {
				alert(i);
				options[i].checked = true;
			};

			// 以下循环效率比较低，firefox下取得的数据是数组下标+item+@@iterator+length
			// chrome下取得的数据是数组下标+item+length
			// IE下取得的数据是，没有数组下标
			//for (var i in options) {
				//alert(i);	// 显示：数组下标+item+@@iterator+length
				//options[i].checked = true;
			//}
		}
		function uncheckAll() {
			var options = document.getElementsByName("options");
			for (var i in options) {
				alert(i);
				options[i].checked = false;
			}
  		}
  		function reverseCheck() {
  			var options = document.getElementsByName("options");
  			for (var i = 0; i < options.length; i++) {
  				var checked = options[i].checked;
  				if (checked == true) {
  					options[i].checked = false;
  				} else {
  					options[i].checked = true;
  				}
  			};
  		}
	</script>
</head>
<body>
	<h3>Select Element</h3>
	<select name="" id="">
		<option value="1">1</option>
		<option value="2">2</option>
		<option selected="selected" value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>

	<h3>Radio Element</h3>
	<input type="radio" name="answer" value="1">A<br>
	<input type="radio" name="answer" value="2">B<br>
	<input type="radio" name="answer" value="3" checked="true">C<br>
	<input type="radio" name="answer" value="4">D<br>

	<h3>Checkbox Element</h3>
	<input type="checkbox" name="options" value="1">1<br>
	<input type="checkbox" name="options" value="2" checked="checked">2<br>
	<input type="checkbox" name="options" value="3">3<br>
	<input type="checkbox" name="options" value="4" checked="checked">4<br>
	<input type="checkbox" name="options" value="5">5<br>
	<input type="button" onclick="checkAll()" value="Check All Checkbox" />
	<input type="button" onclick="uncheckAll()" value="Uncheck All Checkbox" />
	<input type="button" onclick="reverseCheck()" value="Reverse check All Checkbox" />
</body>
</html>